<template>
  <div>
  <city-header></city-header>
  <city-search :cities='cities'></city-search>
  <city-list :cities='cities' 
  :hot='hotCities'
  :letter='letter'></city-list>
  <city-alphabet
  :cities='cities'
  @change='handleLetterChange'></city-alphabet>
  </div>
</template>

<script>
  import axios from 'axios'
  import CityHeader from './components/Header.vue'
	import CitySearch from './components/Search.vue'
  import CityList from './components/List.vue'
  import CityAlphabet from './components/Alphabet.vue'
  export default{
    name:'City',
    components:{
      CityHeader,
			CitySearch,
      CityList,
      CityAlphabet
    },
    data() {
      return{
        cities:{},
        hotCities:[],
        letter:''
      }
    },
    methods: {
      getCityinfo (){
        axios.get('/api/city.json')
         .then(this.getCityInfoSucc)
      },
      getCityInfoSucc (res){
        res=res.data
        if(res.ret&&res.data){
          const data=res.data
          this.cities=data.cities
          this.hotCities=data.hotCities
        }
      },
      handleLetterChange(letter){
        this.letter=letter
      }
    },
    mounted (){
      this.getCityinfo()
    }
    }

</script>

<style lang='stylus' scoped>
</style>
